<html lang="en">
<head>
<title>表单分类</title>
<meta charset="utf-8" />
</head>
<link href="/static/devtools30/layui-v2.5.6/css/layui.css" rel="stylesheet"/>
<link href="/static/devtools30/layui-v2.5.6/layuicommon.css" rel="stylesheet" />
<link href="/static/devtools30/layui-v2.5.6/ext/soulTable/soulTable.css" rel="stylesheet"/>
<script src="/static/devtools30/js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="/static/devtools30/js/dlcommon.js?v=3" type="text/javascript"></script>
<script src="/static/devtools30/layui-v2.5.6/layui.all.js" type="text/javascript"></script>
<script src="/static/devtools30/layui-v2.5.6/layui.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="/static/devtools30/js/bignumber.js"> </script>
<script src="/static/devtools30/js/devtoolCommon.js" type="text/javascript"></script>
<body class="layui-layout-body" style="padding: 8px">
<div style="height: 100%;background: #F7F7F7;">
    <div class="flex flex-align-center flex-jusity-betreen tophead backgroundf">
        <div class="flex flex-align-center">
            <div class="layui-form flex flex-align-center">
                <div class="layui-form-item">
                    <label class="layui-form-label">分类</label>
                    <div class="layui-input-block">
                        <select name="interest" lay-filter="aihao">
                            <option value="0">分类1</option>
                            <option value="1">分类2</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item marginleft10 search">
                    <label class="layui-form-label">查询</label>
                    <div class="layui-input-block">
                        <input type="text" name="" placeholder="请输入序号/名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal marginleft10">确定</button>
            </div>
        </div>
        <div class="layui-btn-group btns">
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" name='101'>分类维护</button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" name='102'>表维护</button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" name='103'>新增元数据</button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" name='104'>数据库导入</button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" name='105'>更新SQL</button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" name='106' onclick="layuitableexport()">导出</button>
        </div>
    </div>

    <div class="flex flex-jusity-betreen " style="height:100%;background: #F7F7F7;padding: 3px 10px 3px 10px;">
        <table id="testlayuitable" lay-filter="testlayuitable"></table>
    </div>
</div>
</body>
</html>
<script>
    var CLIENTHEIGHT = document.body.clientHeight;
    var CLIENTWIDTH = document.body.clientWidth;
    $(function() {
        layui.config({
            base: '/static/devtools30/layui-v2.5.6/ext/',// 第三方模块所在目录
            version: 'v1.5.10' // 插件版本号
        }).extend({
            soulTable: 'soulTable/soulTable',
            tableChild: 'soulTable/tableChild',
            tableMerge: 'soulTable/tableMerge',
            tableFilter: 'soulTable/tableFilter',
            excel: 'soulTable/excel',
            treeGrid:'treegrid/treeGrid'
        });
        layui.use(['form','table','soulTable'], function() {
            searchtestlayuitable();
        })
    });

    function searchtestlayuitable() {
        dlCommon.getJSON("/static/devtools30/layui-v2.5.6/layuidemo.json",function (data) {
            showtestlayuitable(data);
        });
    }

    function layuitableexport() {
        param={url:'/ExportController/excel?title=测试','mode':'gray'}
        // param={url:'/ExportController/excel','mode':'full_color',dataformat:dataformat}
        layui.table.toExcel('testlayuitable',param);
    }

    function showtestlayuitable(data) {
        //展示已知数据
        layui.table.render({
            height: "full-200",//CLIENTHEIGHT-60
            // width: CLIENTWIDTH-10,
            // size: 'sm', //小尺寸的表格 lg sm
            skin: 'line', //行边框风格
            // even: true, //开启隔行背景
            elem: '#testlayuitable',
            cols: [[ //标题栏
                {field: 'id', title: 'ID', width: 80, sort: true, filter: true,rowspan:2}
                ,{field: '', title: '基本信息', width: 120, sort: true, filter: true,colspan:2}
                ,{field: 'sign', title: '签名', minWidth: 100, sort: true, filter: true,rowspan:2}
                ,{field: 'sex', title: '性别', width: 80, sort: true, filter: true,rowspan:2}
                ,{field: 'city', title: '城市', width: 100, sort: true, filter: true,rowspan:2}
                ,{field: 'experience', title: '积分', width: 80, sort: true, filter: true,rowspan:2,templet: function (d) {
                        // date.setTime(d.GMT_CREATE);
                        return new BigNumber('8888888888888888').toFormat();
                    }},
                {width:200,title: '操作', align:'center',rowspan:2
                    ,templet: function(d){
                        var html='';
                        html=html+'<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>&nbsp;&nbsp;';
                        html=html+'<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>';
                        return html;
                    }
                }
            ],[ //标题栏
                {field: 'username', title: '用户名', width: 120, sort: true, filter: true}
                ,{field: 'email', title: '邮箱', minWidth: 150, sort: true, filter: true}
            ]],
            data:data?data:[],
            // ,page: true //是否显示分页
            // ,limits: [5, 7, 10]
            // ,limit: 5 //每页默认显示的数量
            done: function() {
                // 在 done 中开启
                layui.soulTable.render(this)
            }
        });
    }
</script>
